<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 资产管理系统</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --muted-color: #6c757d;
        }
    
        body {
            background-color: #f8f9fc;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 14px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding-bottom: 60px;
        }
    
        .navbar {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            padding: 0.5rem 0;
            background-color: var(--primary-color);
            transition: background-color 0.3s ease;
            width: 100%;
        }
        .navbar:hover { background-color: #4367d6; }
    
        .navbar-brand {
            font-weight: 600;
            font-size: 1.35rem;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .navbar-brand svg { transition: transform 0.3s ease; }
        .navbar-brand:hover svg { transform: scale(1.1); }
    
        .container {
            width: 85%;
            max-width: 85%;
            padding: 1rem 0 1.5rem;
            flex: 1;
            margin: 0 auto;
        }
    
        .user-table-container {
            width: 800px;
            margin: 0 auto;
        }
    
        .card {
            border: 1px solid #e3e6f0;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            margin-bottom: 1.5rem;
        }
        .card-header {
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            font-weight: 600;
            padding: 0.75rem 1.25rem;
        }
        .card-body { padding: 1.25rem; }
    
        h2 {
            color: var(--dark-color);
            margin: 1rem 0;
            font-size: 1.4rem;
            font-weight: 600;
        }
    
        .form-control, .form-select {
            padding: 0.375rem 0.75rem;
            border: 1px solid #d1d3e2;
            border-radius: 0.35rem;
            font-size: 13px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }
        .form-control:focus, .form-select:focus {
            border-color: #bac8f3;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }
    
        .btn {
            padding: 0.5rem 1rem;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s;
        }
        .btn-primary { background-color: var(--primary-color); border: none; }
        .btn-primary:hover { background-color: #3a5bc7; }
        .btn-danger { background-color: var(--danger-color); border: none; }
        .btn-danger:hover { background-color: #c82333; }
        .btn-outline-light { border-width: 1.5px; }
    
        .btn-animated {
            position: relative;
            overflow: hidden;
        }
        .btn-animated:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }
        .btn-animated:active:after { animation: ripple 0.6s ease-out; }
    
        .table {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        }
        .table th {
            background-color: #f8f9fc;
            border-bottom-width: 1px;
            font-weight: 600;
            color: #5a5c69;
            padding: 0.75rem 1rem;
        }
        .table td {
            padding: 0.75rem 1rem;
            vertical-align: middle;
        }
    
        .badge {
            font-weight: 500;
            padding: 0.35em 0.65em;
            font-size: 12px;
        }
        .bg-danger { background-color: var(--danger-color); }
        .bg-primary { background-color: var(--primary-color); }
    
        .nav-link {
            position: relative;
            overflow: hidden;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }
        .nav-link:not(.active):after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s ease;
            border-radius: 2px;
        }
        .nav-link:not(.active):hover:after { width: 100%; }
        .nav-link.active { background-color: rgba(255, 255, 255, 0.1); }
    
        footer {
            background-color: white;
            border-top: 1px solid #e3e6f0;
            padding: 1rem 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .footer-links {
            display: flex;
            gap: 1rem;
        }
        .footer-links a {
            color: var(--muted-color);
            transition: color 0.2s ease;
        }
        .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }
    
        /* 通用组件样式 */
        .action-btn-group { display: flex; gap: 8px; }
        .action-btn {
            padding: 0.375rem 0.75rem;
            font-size: 12px;
            min-width: 70px;
        }
        .btn-disabled { opacity: 0.65; cursor: not-allowed; }
        .table-responsive { display: block; width: 100%; overflow-x: auto; }
        .modal-footer .btn { min-width: 80px; padding: 0.375rem 0.75rem; }
    
        /* 动画 */
        @keyframes ripple {
            0% { transform: scale(0, 0); opacity: 0.5; }
            100% { transform: scale(20, 20); opacity: 0; }
        }
    
        /* 响应式设计 */
        @media (max-width: 992px) {
            .user-table-container { width: 100%; padding: 0 15px; }
        }
        @media (max-width: 768px) {
            .container { width: 95%; max-width: 95%; padding: 0 15px; }
            .navbar-nav { margin-top: 10px; }
            .nav-link { padding: 0.5rem 0.75rem; }
            .btn-outline-light { margin-top: 10px; }
            .table td, .table th { padding: 0.5rem; }
            .action-btn { padding: 0.25rem 0.5rem; font-size: 11px; min-width: 60px; }
            .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
            .footer-links a { font-size: 12px; }
        }
        @media (max-width: 576px) {
            .container { width: 100%; max-width: 100%; }
            .user-table-container { padding: 0 5px; }
            .form-control, .form-select { font-size: 12px; }
            .card-body { padding: 1rem; }
            h2 { font-size: 1.2rem; }
            .modal-dialog { margin: 0.5rem auto; }
        }
    </style>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-lg navbar-dark">
            <div class="container py-2">
                <!-- 品牌标识 -->
                <a class="navbar-brand" href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 6H20V20H4V6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M4 10H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M8 6V2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M16 6V2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    资产管理系统
                </a>
                
                <!-- 移动端菜单按钮 -->
                <button class="navbar-toggler py-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        style="border-color: rgba(255,255,255,0.3);">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                <!-- 菜单内容 -->
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto align-items-center gap-1">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <i class="fa fa-dashboard mr-1"></i> 首页
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/report">
                                <i class="fa fa-plus-circle mr-1"></i> 上报资产
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/admin/users">
                                <i class="fa fa-users mr-1"></i> 用户管理
                            </a>
                        </li>
                    </ul>
                    
                    <div class="d-flex align-items-center">                       
                        <a href="/logout" class="btn btn-outline-light btn-xs rounded-pill px-3 py-1">
                            <i class="fa fa-sign-out mr-1"></i> 退出
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="user-table-container">
                <h2><i class="fa fa-users mr-2"></i>用户管理</h2>
                
                <div class="card mb-3">
                    <div class="card-header"><i class="fa fa-user-plus mr-2"></i>添加新用户</div>
                    <div class="card-body">
                        <form @submit.prevent="addUser" class="row g-2">
                            <div class="col-md-3 col-12">
                                <input type="text" class="form-control" v-model="newUser.username" placeholder="用户名" required>
                            </div>
                            <div class="col-md-3 col-12">
                                <input type="password" class="form-control" v-model="newUser.password" placeholder="密码" required>
                            </div>
                            <div class="col-md-3 col-12">
                                <select class="form-select" v-model="newUser.role" required>
                                    <option value="user">普通用户</option>
                                    <option value="admin">管理员</option>
                                </select>
                            </div>
                            <div class="col-md-3 col-12">
                                <button type="submit" class="btn btn-primary w-100 btn-animated">
                                    <i class="fa fa-plus mr-1"></i>添加
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>用户名</th>
                                        <th>角色</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="user in users" :key="user.id">
                                        <td>{{ user.id }}</td>
                                        <td>{{ user.username }}</td>
                                        <td>
                                            <span class="badge" :class="{'bg-danger': user.role === 'admin', 'bg-primary': user.role === 'user'}">
                                                {{ user.role === 'admin' ? '管理员' : '普通用户' }}
                                            </span>
                                        </td>
                                        <td>{{ formatDate(user.created_at) }}</td>
                                        <td>
                                            <div class="action-btn-group">
                                                <button class="btn btn-sm btn-primary action-btn edit-btn btn-animated" @click="openEditModal(user)">
                                                    <i class="fa fa-edit mr-1"></i>编辑
                                                </button>
                                                <button class="btn btn-sm btn-danger action-btn delete-btn btn-animated" 
                                                        @click="confirmDeleteUser(user)"
                                                        :disabled="user.username === 'admin'">
                                                    <i class="fa fa-trash mr-1"></i>删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 编辑用户模态框 -->
        <div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title"><i class="fa fa-edit mr-2"></i>编辑用户</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="closeModal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="editUserForm">
                            <input type="hidden" v-model="editingUser.id">
                            <div class="mb-3">
                                <label for="editUsername" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="editUsername" 
                                       v-model="editingUser.username" placeholder="用户名" required
                                       :disabled="editingUser.username === 'admin'">
                            </div>
                            <div class="mb-3">
                                <label for="editPassword" class="form-label">新密码</label>
                                <input type="password" class="form-control" id="editPassword" 
                                       v-model="editingUser.password" placeholder="新密码 (留空不修改)">
                            </div>
                            <div class="mb-3">
                                <label for="editRole" class="form-label">角色</label>
                                <select class="form-select" id="editRole" v-model="editingUser.role" required
                                        :disabled="editingUser.username === 'admin'">
                                    <option value="user">普通用户</option>
                                    <option value="admin">管理员</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                       
                        <button type="button" class="btn  btn-animated" data-bs-dismiss="modal" >取消</button>
                        <button type="button" class="btn btn-primary btn-animated" @click="saveUser">
                            <i class="fa fa-save mr-1"></i>保存
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <footer class="py-3">
            <div class="container">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-sm text-muted mb-2 mb-md-0">© 2025 资产管理系统. TIMI开发</p>
                    <div class="footer-links">
                        <a href="#" class="text-muted">
                            <i class="fa fa-question-circle mr-1"></i> 帮助中心
                        </a>
                        <a href="#" class="text-muted">
                            <i class="fa fa-file-text-o mr-1"></i> 使用手册
                        </a>
                        <a href="#" class="text-muted">
                            <i class="fa fa-envelope-o mr-1"></i> 联系我们
                        </a>
                    </div>
                </div>
            </div>
        </footer>
    </div>

    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/vue/vue.global.prod.js"></script>
    <script>
        const { createApp, ref, onMounted } = Vue;
        
        createApp({
            setup() {
                const users = ref([]);
                const newUser = ref({
                    username: '',
                    password: '',
                    role: 'user'
                });
                const editingUser = ref({
                    id: '',
                    username: '',
                    password: '',
                    role: 'user'
                });
                let editModal = null;
                
                // 格式化日期
                const formatDate = (dateString) => {
                    return new Date(dateString).toLocaleString();
                };
                
                // 加载用户列表
                const loadUsers = async () => {
                    try {
                        const response = await fetch('/api/users');
                        const data = await response.json();
                        users.value = data;
                    } catch (error) {
                        alert('加载用户失败: ' + error.message);
                        window.location.href = '/dashboard';
                    }
                };
                
                // 添加用户
                const addUser = async () => {
                    if (newUser.value.username === 'admin') {
                        alert('不能创建admin用户');
                        return;
                    }
                    
                    try {
                        const response = await fetch('/api/users', {
                            method: 'POST',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(newUser.value)
                        });
                        const data = await response.json();
                        
                        if (data.success) {
                            loadUsers();
                            newUser.value = { username: '', password: '', role: 'user' };
                        } else {
                            alert(data.message || '添加用户失败');
                        }
                    } catch (error) {
                        alert('添加用户失败: ' + error.message);
                    }
                };
                
                // 删除用户确认
                const confirmDeleteUser = (user) => {
                    if (user.username === 'admin') {
                        alert('不能删除admin用户');
                        return;
                    }
                    
                    if (confirm(`确定要删除用户 "${user.username}" 吗？此操作不可恢复！`)) {
                        deleteUser(user.id);
                    }
                };
                
                // 删除用户
                const deleteUser = async (userId) => {
                    try {
                        const response = await fetch(`/api/users/${userId}`, {
                            method: 'DELETE',
                            headers: {'Content-Type': 'application/json'}
                        });
                        
                        if (!response.ok) {
                            throw new Error('删除失败，服务器返回错误');
                        }
                        
                        const data = await response.json();
                        if (data.success) {
                            loadUsers();
                        } else {
                            alert(data.message || '删除用户失败');
                        }
                    } catch (error) {
                        alert('删除用户失败: ' + error.message);
                    }
                };
                
                // 打开编辑模态框
                const openEditModal = (user) => {
                    editingUser.value = {
                        id: user.id,
                        username: user.username,
                        password: '',
                        role: user.role
                    };
                    
                    if (!editModal) {
                        editModal = new bootstrap.Modal(document.getElementById('editUserModal'));
                    }
                    editModal.show();
                };
                
                // 保存用户编辑
                const saveUser = async () => {
                    try {
                        const response = await fetch(`/api/users/${editingUser.value.id}`, {
                            method: 'PUT',
                            headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify({
                                username: editingUser.value.username,
                                password: editingUser.value.password || undefined,
                                role: editingUser.value.role
                            })
                        });
                        const data = await response.json();
                        
                        if (data.success) {
                            closeModal();
                            loadUsers();
                        } else {
                            alert(data.message || '更新用户失败');
                        }
                    } catch (error) {
                        alert('更新用户失败: ' + error.message);
                    }
                };
                
                // 关闭模态框
                const closeModal = () => {
                    if (editModal) {
                        editModal.hide();
                    }
                };
                
                // 组件挂载时加载用户数据
                onMounted(() => {
                    loadUsers();
                });
                
                return {
                    users,
                    newUser,
                    editingUser,
                    formatDate,
                    addUser,
                    openEditModal,
                    confirmDeleteUser,
                    saveUser,
                    closeModal
                };
            }
        }).mount('#app');
    </script>
</body>
</html>